<template>
  <!-- 网点管理详情 -->
  <view class="content bg-white">
    <!-- 通知 -->
    <uni-notice-bar
      show-icon
      scrollable
      text="网点地址编辑请在代理商后台管理系统操作"
      color="#008afe"
    />
    <!-- 详细信息 -->
    <view class="ui-list fz26">
      <view class="item flex flex-y-center">
        <view class="flex1">网点ID</view>
        <view>{{ state.dataSource.id }}</view>
      </view>

      <!-- 可编辑区域 -->
      <view :class="state.isEdit ? 'edit' : ''">
        <view class="item flex flex-y-center">
          <view class="flex1">
            <text class="red">*</text>
            网点名称
          </view>
          <view v-if="state.isEdit"
            ><input class="input t-r" v-model="state.formState.networkName"
          /></view>
          <view v-else>{{ state.dataSource.networkName }}</view>
        </view>
        <view class="item flex flex-y-center">
          <view class="flex1">
            <text class="red">*</text>
            维护人员
          </view>
          <view v-if="state.isEdit"
            ><input
              class="input t-r"
              v-model="state.formState.maintenanceStaff"
          /></view>
          <view v-else>{{ state.dataSource.maintenanceStaff }}</view>
        </view>
        <view class="item flex flex-y-center">
          <view class="flex1">
            <text class="red">*</text>
            维护电话
          </view>
          <view v-if="state.isEdit"
            ><input
              class="input t-r"
              v-model="state.formState.maintenanceTelephone"
          /></view>
          <view v-else>{{ state.dataSource.maintenanceTelephone }}</view>
        </view>
        <view class="item flex flex-y-center">
          <view class="flex1">
            <text class="red">*</text>
            服务时间
          </view>
          <view v-if="state.isEdit"
            ><input class="input t-r" v-model="state.formState.serviceTime"
          /></view>
          <view v-else>{{ state.dataSource.serviceTime }}</view>
        </view>
      </view>

      <view class="item flex flex-y-center">
        <view class="flex1">区域</view>
        <view
          >{{ state.dataSource.provinceCn }}{{ state.dataSource.cityCn
          }}{{ state.dataSource.areaCn }}{{ state.dataSource.streetCn }}</view
        >
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">纬度</view>
        <view>{{ state.dataSource.latitude }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">经度</view>
        <view>{{ state.dataSource.longitude }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">定位地址</view>
        <view>{{ state.dataSource.locationAddress }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">详细地址</view>
        <view>{{ state.dataSource.detailAddress }}</view>
      </view>
      <map
        class="map bg-green"
        :longitude="state.dataSource.longitude"
        :latitude="state.dataSource.latitude"
        :markers="state.markers"
      ></map>
    </view>

    <!-- 操作按钮 -->
    <view class="fixed-btn-box">
      <view class="btn-box flex flex-x-between bg-white">
        <template v-if="state.isEdit">
          <button class="btn flex1 main-bgColor" @click="onSave">保存</button>
          <button class="btn flex1 bg-gray ml20" @click="state.isEdit = false">
            取消
          </button>
        </template>
        <button class="btn flex1 main-bgColor" v-else @click="onEdit">
          编辑
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { networkDetails, networkEdit } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();
const state = reactive({
  id: "",
  isSend: false,
  dataSource: {},
  markers: [],
  isEdit: false,
  formState: {},
});

// 加载数据
const loadData = () => {
  networkDetails({ id: state.id }).then((res) => {
    if (res.success) {
      state.dataSource = res.result;
      state.markers = [
        {
          id: 1,
          longitude: +res.result.longitude,
          latitude: +res.result.latitude,
        },
      ];
    }
  });
};

// 页面加载完成
onLoad(async (option) => {
  await proxy.$onLaunched;
  state.id = option.id;
  loadData();
});

// 编辑
const onEdit = () => {
  state.isEdit = true;
  const obj = {};
  obj.networkName = state.dataSource.networkName;
  obj.maintenanceStaff = state.dataSource.maintenanceStaff;
  obj.maintenanceTelephone = state.dataSource.maintenanceTelephone;
  obj.serviceTime = state.dataSource.serviceTime;
  obj.id = state.dataSource.id;
  state.formState = obj;
};

// 保存
const onSave = () => {
  if (state.isSend) return;
  if (!state.formState.networkName) {
    uni.showToast({
      icon: "none",
      title: "网点名称不能为空",
    });
    return;
  }
  if (!state.formState.maintenanceStaff) {
    uni.showToast({
      icon: "none",
      title: "维护人员不能为空",
    });
    return;
  }
  if (!state.formState.maintenanceTelephone) {
    uni.showToast({
      icon: "none",
      title: "维护电话不能为空",
    });
    return;
  }
  const reg1 = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  const reg2 = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/;
  if (
    !(
      reg1.test(state.formState.maintenanceTelephone) ||
      reg2.test(state.formState.maintenanceTelephone)
    )
  ) {
    uni.showToast({
      icon: "none",
      title: "请输入正确维护电话",
    });
    return;
  }
  if (!state.formState.serviceTime) {
    uni.showToast({
      icon: "none",
      title: "服务时间不能为空",
    });
    return;
  }
  state.isSend = true;
  networkEdit(state.formState)
    .then(() => {
      uni.showToast({
        title: "编辑成功",
        mask: true,
      });
      state.isEdit = false;
      setTimeout(() => {
        loadData();
      }, 1000);
    })
    .finally(() => {
      state.isSend = false;
    });
};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.ui-list {
  .item {
    padding: 30rpx;
    border-bottom: 2rpx solid #eee;

    &:last-of-type {
      border-bottom: none;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .input {
      width: 100%;
    }

    .red {
      display: none;
    }
  }

  .edit {
    .red {
      display: inline;
    }

    .item {
      background: #fffce6;
    }
  }
}

.map {
  width: 750rpx;
  height: 500rpx;
}
</style>
